<template>
	<div class="container">
		<h1 class="title">{{photoInfo.title}}</h1>
		<p class="subTitle">
			<span>创建时间：{{photoInfo.add_time | dataFormat}}</span>
			<span>点击：{{photoInfo.click}}</span>
		</p>
		<hr>
		<!-- 图片缩略图 -->
		<div class="tupian">
			<vue-preview :slides="slide1" @close="handleClose" ></vue-preview>
		</div>
		
		<!-- 图片描述 -->
		<div class="content" v-html="photoInfo.content"></div>
		
		
		<!-- 评论组件 -->
		<comment :id="id"></comment>
	</div>
</template>

<script>
	import comment from '../subcomponent/comment.vue'
	
	export default{
		data() {
			return {
				id: this.$route.params.id,
				photoInfo:[],
				slide1:[]
			}
		},
		created() {
			this.getPhotoInfo()
			this.getPhoto()
		},
		methods:{
			getPhotoInfo(){
				this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/'+this.id).then(data => {
					if(data.body.status==0){
						// console.log(data.body)
						this.photoInfo=data.body.message[0]
					}
				})
			},
			handleClose () {
        console.log('close event')
      },
			getPhoto(){
				this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id).then(data =>{
					if(data.body.status===0){
						data.body.message.forEach(item=>{
							item.msrc=item.src
							item.w=600
							item.h=400
						})
						this.slide1=data.body.message
					}else{
						
					}
				})
			}
				
		},
		components:{
			comment
		}
	}
</script>

<style scoped="scoped">
	.container{
		padding: 0px 5px;
	}
	.title{
		font-size: 15px;
		color: #007AFF;
		text-align: center;
		margin: 15px 0px;
	}
	.subTitle{
		font-size: 12px;
		color: #777777;
		display: flex;
		justify-content: space-between;
	}
	.content{
		font-size: 13px;
		line-height: 25px;
	}
	.tupian{
		/* margin: 0px; */
		
		text-align: center;
	}
</style>
